Webpack 4 配置实战疑点详解

引言

本文不是一个完整的配置指南，而是在一个完整配置的基础上进行优化或者实现一些特殊需求的内容，不是一个完整的配置参考，但能给出参考入口，同时也能将文档没写清楚的内容做一下详细解释。

基本配置

optimization

• 文档参考–

• webpack本身会自动对代码块进行分割，条件规则如下

  • 新的可共享的块或者从node_modules里面来的模块
  • 新的大约30KB（压缩前大小）的块
  • 按需加载最大并行请求数量要求不超过5个
  • 初始页面最大并行请求数量要求不超过3个

• 默认值如下

  module.exports = {
    //...
    optimization: {
      splitChunks: {
        chunks: 'async',
        minSize: 30000,
        maxSize: 0,  // 优先级 maxInitialRequest/maxAsyncRequests < maxSize < minSize
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  };

• optimization.runtimeChunk 可选值 true和multiple,还有 single 参考

  • true和multiple是一个意思，
  • 这里需要注意下，在配置html-webpack-plugin的时候，需要配置runtime-${entry} 或者是 runtime

• optimization.splitChunks.chunks 制定需要优化的代码块

  • all 同步和异步模块都进行打包优化，在所有块中共享块
  • async 只针对异步模块进行打包优化，在异步块中共享块
  • initial 只针对同步块进行打包优化，在同步块中共享块
  • Function ,

• optimization.splitChunks.cacheGroups 作为代码块分组的内容，作用替代CommonsChunkPlugin,test、priority、reuseExistingChunk 只能在cacheGroups下面每个group中设置

  • 多页打包，提取公共内容

    cacheGroups: {
        commons: {
            name: 'commons',
            chunks: 'initial',
            minChunks: 2
        }
    }

  • node_modules下面的内容单独打包

    cacheGroups: {
        commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
        }
    }

• 注意事项

  • 默认会有vendors-${entry}这个注入块
  • vendors-${entry}在配置了多个 cacheGroups的情况下，不一定会出这个注入块（有优先级、size、minChunks等条件的约束）
  • 配置成html-webpack-plugin chunks的时候需要注意这个问题

• 待解决 default 控制了什么内容

webpack-dev-server

• 文档参考

• 增加一个API Mock 中间件的配置，插件源码参考, 放setup ,before配置里面都可以

  module.exports = {
    //...
    devServer: {
      setup: function(app, server) {
        if (config.dev.withMock) {
            app.use(mockPlugin({
                mockConf: './mock/mock-conf.js'
            }))
        }
      }
    }
  };

• host配置为0.0.0.0可以支持外部访问，比如用IP地址来访问

• historyApiFallback 配置 history 模式下的路由解析

  historyApiFallback: {
              rewrites: [
                  {from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html')},
              ],
  },

• hot webapck-dev-server 内置了热更新，只需要配置hot=true即可，使用webpack-dev-middleware的话还需要单独配置热更新的内容

• https 配置启用https，可以使用webpack-dev-server内置的证书，也可以自己提供证书

• overlay 报错直接在页面上显示

  module.exports = {
    //...
    devServer: {
      overlay: {
        warnings: true,
        errors: true
      }
    }
  };

html-webpack-plugin 打包js注入模板

• 文档参考
• 默认可以解析 lodash templates, 常用的如下：
  • 使用 <%= variable %> 或者 <% ${variable} %> 来展示变量值
  • 使用<%- variable %> 来对变量值进行HTML转义
  • 使用 <% //js code %> 来嵌入JavaScript代码
• 问题1，使用chunks 设置内容的时候，同样的配置在npm run dev下，会多出来一个vendors-${entry}的注入项，如果chunks中没设置，会导致页面无法渲染，没有报错
  • 原因：默认有vendors组，会将node_modules 里面的自动打包，并且根据根据entry命名 vendors-${entry}类似于runtime
  • 解决：直接不设置chunks，使用自动的配置；或者禁用vendors 组（设置cacheGroups.vendors:false），

web-webpack-plugin 针对多页打包有优化

• web-webapck-plugin

script-ext-html-webpack-plugin 增强的html-webpack-plugin 更多精细控制

• 文档参考

优化

分析工具

• 打包时间衡量 speed-measure-webpack-plugin

• 打包模块依赖查看 [webpack-bundle-analyzer]

• 命令行看板 webpack-dashboard

• 增强版打包看板 jarvis

性能优化

• 启用babel-loader cacheDirectory

• 增加happypack（再Webpack4中启用babel-loader Cache后引入几乎无改善）

  • 修改webpack.base.conf.js 将babel-loader缓存 happypack-loader

  {
                  test: /\.js$/,
                  // loader: 'babel-loader?cacheDirectory',
                  loader:'happypack/loader?id=babelloader',
                  // use: [{
                  //     loader:'happypack/loader',
                  //     options:{
                  //         id:'babelloader'
                  //     }
                  // }],
  }
  
  // 增加对vue-loader的配置
  Object.assign(vueLoaderConfig.loaders, {
      js: 'happypack/loader?id=babelloader',
  })

  • 修改webpack.prod.conf.js 增加babel-loader 插件配置

  new HappyPack({
             id:'babelloader',
             loaders:['babel-loader?cacheDirectory']
  }),

  • 异常解决 Error: options/query provided without loader (use loader + options) in

  将上面的改动use的写法，改成loader的写法

• dll打包的方式，优化效果也不明显，使用optimization.splitChunks.cacheGroups 来优化浏览器长期缓存

参考资料

0. 加快Vue项目的开发速度
1. Vue项目Webpack优化实践，构建效率提高50%
2. Webpack4优化之路
3. 从实践中寻找webpack4最优配置
4. 手摸手，带你用合理的姿势使用webpack4（下）
5. webpack SplitChunksPlugin实用指南
6. Webpack 4 配置最佳实践
7. Webpack 4 配置最佳实践
8. Webpack 打包优化之速度篇 vue-loader-happypack
9. 使用happypack将vuejs项目webpack初始化构建速度提升50%
10. React 16 加载性能优化指南
11. webpack4之splitChunks拆拆拆
12. 一步一步的了解webpack4的splitChunk插件
13. 趁webpack5还没出，先升级成webpack4吧
14. webpack4.0各个击破（4）—— Javascript & splitChunk
15. Webpack4之SplitChunksPlugin规则
16. Webpack4学习笔记（三）——代码分割（多入口）
17. WebpackOptions.json
18. 手摸手，带你用合理的姿势使用webpack4（上）
19. 手摸手，带你用合理的姿势使用webpack4（上）
20. 高性能webpack配置
21. chunks 详解-Webpack 4 — Mysterious SplitChunks Plugin
22. Webpack 4 Course Code Spliting with SplitChunksPlugin
23. webpack 4: 模式(mode)和优化项(optimization)说明

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/dev-tools/webpack/2017-11-03-advanced-webpack-config/

小淼焱

赏

× 赞赏这个人~